<!-- 
在 Nuxt 3 中，网络请求是构建动态应用程序的一个重要部分。Nuxt 3 提供了多种方式来处理网络请求，使得数据获取和状态管理变得更加简单和高效。以下是关于 Nuxt 3 网络请求的说明总结：
  1. 网络请求的基本方式
   1.1 使用 `fetch` API
  在 Nuxt 3 中，可以直接使用浏览器内置的 `fetch` API 进行网络请求。这种方式适用于在组件中获取数据。

  ```javascript
  <template>
    <div>
      <h1>{{ data.title }}</h1>
    </div>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';

  const data = ref(null);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    data.value = await response.json();
  };

  onMounted(fetchData);
  </script>
  ```

   1.2 使用 `asyncData`
  `asyncData` 是 Nuxt 3 提供的一个特殊钩子，可以在页面组件渲染之前获取数据，并将其合并到组件的响应式状态中。

  ```javascript
  export default {
    async asyncData() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      return { data };
    }
  };
  ```

   1.3 使用 `fetch` 钩子
  `fetch` 钩子与 `asyncData` 类似，但它不会影响组件的响应式状态。适用于需要在组件中进行异步操作但不需要直接影响数据的场景。

  ```javascript
  export default {
    fetch() {
      return fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          this.data = data;
        });
    }
  };
  ```

  2. 使用 Axios 进行网络请求
  虽然 Nuxt 3 默认不包含 Axios，但可以通过安装 `@nuxtjs/axios` 模块来方便地使用 Axios 进行网络请求。

   2.1 安装 Axios
  首先，在项目中安装 Axios 模块：

  ```bash
  npm install @nuxtjs/axios
  ```

   2.2 配置 Axios
  在 `nuxt.config.ts` 中添加 Axios 模块：

  ```typescript
  export default defineNuxtConfig({
    modules: [
      '@nuxtjs/axios'
    ],
    axios: {
      baseURL: 'https://api.example.com' // 设置基础 URL
    }
  });
  ```

   2.3 使用 Axios
  在组件中使用 Axios 进行网络请求：

  ```javascript
  <template>
    <div>
      <h1>{{ data.title }}</h1>
    </div>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';
  import { useAxios } from '@nuxtjs/axios';

  const data = ref(null);

  const fetchData = async () => {
    const response = await useAxios().get('/data');
    data.value = response.data;
  };

  onMounted(fetchData);
  </script>
  ```

  3. 处理请求错误
  在进行网络请求时，处理错误是非常重要的。可以使用 `try-catch` 语句来捕获异常，确保应用的稳定性。

  ```javascript
  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      data.value = await response.json();
    } catch (error) {
      console.error('Fetch error:', error);
    }
  };
  ```

  4. 适用场景
  - 获取 API 数据：在页面渲染之前或组件加载时获取数据。
  - 提交表单数据：通过 POST 请求将用户输入的数据提交到服务器。
  - 动态内容加载：根据用户的操作动态加载内容。

  希望以上总结能够帮助你更好地理解 Nuxt 3 中的网络请求！如果有其他问题，欢迎随时询问。 
-->
<template>
  <div class="cpns-nuxt">
    <h2>cpns-nuxt</h2>
  </div>
</template>

<script setup lang="ts">
  const BASE_URL = "http://codercba.com:9060/juanpi/api";
  interface IResultData {
    code: number;
    data: any;
  }
  // 1.使用 $fetch 来发起网络请求
  // server and client
  $fetch(BASE_URL + "/homeInfo", {
    method: "GET",
  }).then((res) => {
    console.log(res);
  });

  // 2.使用官方提供的 hooks API ( 在刷新页面时, 可以减少客户端发起的一次请求 )
  const { data } = await useAsyncData<IResultData>("homeInfo", () => {
    return $fetch(BASE_URL + "/homeInfo", {
      method: "GET",
    });
  });

  console.log(data.value?.data);

  const { data: newData } = await useAsyncData<IResultData>("homeInfo", () => {
    return $fetch(BASE_URL + "/homeInfo", {
      method: "POST",
    });
  });

  console.log("newData", newData.value?.data);

  // 3.useAsyncData的简写 useFetch
  console.log(newData.value?.data);
  const { data: dataObj } = await useFetch<IResultData>(BASE_URL + "homeInfo", {
    method: "GET",
  });

  console.log(dataObj.value?.data);

  // 4. useFetch 的 options GET
  const { data: dataObj2 } = await useFetch<IResultData>(
    BASE_URL + "homeInfo",
    {
      method: "GET",
      baseURL: BASE_URL,
      query: {
        name: "tom",
      },
    }
  );

  console.log(dataObj2.value?.data);

  // 5. 拦截器
  const {} = await useFetch<IResultData>("/goods", {
    method: "POST",
    baseURL: BASE_URL,
    body: {
      count: 1,
    },
    // 请求的拦截 ( server and client )
    onRequest({ request, options }) {
      console.log(options);
      // options.headers = {
      //   token: "xxxx",
      // };
    },
    onRequestError({ error }) {
      console.log(error);
    },
    // 响应的拦截 ( server and client )
    onResponse({ response, options }) {
      console.log(response);
    },
    onResponseError({ error }) {
      console.log(error);
    },
  });

  // server and client
  const cookie = useCookie("token");
  console.log(cookie.value);
</script>

<style lang="less" scoped>
  .cpns-nuxt {
  }
</style>
